<template>
  请输入书籍关键字：
  <input type="text" v-model="mytext" /><p></p>
  查询结果：
  <ul>
    <li v-for="(item, index) in list" :key="index">
      {{item}}
    </li>
  </ul>
</template>

<script>
import { watch, ref, onMounted } from 'vue'

export default {
  setup () {
    const mytext = ref('')
    const list = ref([])
    const caschList = []
    watch(mytext, () => {
      console.log(mytext.value)
      list.value = caschList.value.filter(item => item.includes(mytext.value))
    })
    onMounted(() => {
      fetch('/test.json')
        .then(res => res.json())
        .then(res => {
          list.value = res.list
          caschList.value = res.list
        })
    })
    return {
      mytext,
      list
    }
  }
}
</script>